<template>
    <div>
        <ul class="list">
            <!-- 跳转详情方法一 -->
            <li v-for="item in list" :key="item.id" @click="toDetail(item)">
                <img :src="item.img" alt="">
                <h4>{{ item.title }}</h4>
                <p>价格{{ item.price }}  销量：{{ item.num }}</p>
            </li>

            <!-- 跳转详情方法二 -->
             <!-- <li v-for="item in list" :key="item.id">
                <router-link :to="{ path: '/detail', query: item }">
                    <img :src="item.img" alt="">
                    <h4>{{ item.title }}</h4>
                    <p>价格{{ item.price }}  销量：{{ item.num }}</p>
                </router-link>
             </li> -->
        </ul>
    </div>
</template>

<script setup>
    import axios from 'axios'
    import { onMounted, ref } from 'vue';
    import { useRouter } from 'vue-router';

    const router = useRouter()

    const list = ref([])

    // 跳转详情页，传参数通过query，传的是个对象
    const toDetail = (item) =>{
        router.push({
            path: '/detail',
            query: item
        })
    }

    // 请求接口数据
    const getData = () =>{
        axios.get('/api/list').then(res =>{
            if(res.status === 200) {
                list.value = res.data
            }
        })
    }

    onMounted(()=>{
        getData()
    })
</script>

<style scoped>
    .list{
        margin-bottom: 100px;
    }

    p, h4{ 
        color: black;
    }
</style>